<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .content{
            width:100%;
            height:200px;
            background:lightcoral;
        }
        .inner{
            width:100px;
            height:100%;
            background:lightblue;
        }
        @media screen and (max-width: 320px){
            .inner{
                background-color:lawngreen;
            }
        }
        @media screen and (min-width: 321px){
            .inner{
                background-color:lightseagreen;
            }
        }
        body{
            font-size:24px;
            font-weight:bold;
            display:flex;
            flex-direction:column;
            /* min-height:100vh; */
            min-height:100%;
        }
        html{
            height:100%;
        }
        header, footer{
            background:lightblue;
            padding:15px;
        }
        .main{
            flex:1;
        }
        .row{
            display:flex;
            flex-wrap:wrap;
        }
        .col{
            border:1px solid lightgray;
            padding:10px;
            box-sizing:border-box;
        }



        /* @media (max-width:576px){
            .col{
                width:100%;
            }
        }
        @media (min-width:577px) and (max-width:768px){
            .col{
                width:50%;
            }
        }
        @media (min-width:769px) and (max-width: 992px){
            .col{
                width:33.333%;
            }
        }
        @media (min-width:993px) and (max-width:1200px){
            .col{
                width:25%;
            }
        }
        @media (min-width:1201px){
            .col{
                width:16.666666%;
            }
        } */

        .container {
            margin-left:auto;
            margin-right:auto;
            width:100%;
            background:lavenderblush;
        }
        .container:after,
        .container:before,
        .row:after,
        .row:before{
            display:table;
            content:''
        }
        .container:after,
        .row:after{
            clear:both;
        }
        .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{
            float:left;
        }
        .col-1 {
            width:8.33333%;
        }
        .col-2 {
            width:16.66667%;
        }
        .col-3 {
            width:25%;
        }
        .col-4 {
            width:33.33333%;
        }
        .col-5 {
            width:41.66667%;
        }
        .col-6 {
            width:50%;
        }
        .col-7 {
            width:58.333333%;
        }
        .col-8 {
            width:66.66667%;
        }
        .col-9 {
            width:75%;
        }
        .col-10 {
            width:83.33333%;
        }
        .col-11 {
            width:91.66667%;
        }
        .col-12 {
            width:100%;
        }
        .d-none{
            display:none!important;
        }
        .d-block{
            display:block!important;
        }
        /* sm */
        @media (min-width:576px){
            .d-sm-none {
                display:none!important;
            }
            .d-sm-block {
                display:block!important;
            }
            .container {
                width:540px;
            }
            .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12 {
                float:left;
            }
            .col-sm-1 {
                width:8.33333%;
            }
            .col-sm-2 {
                width:16.66667%;
            }
            .col-sm-3 {
                width:25%;
            }
            .col-sm-4 {
                width:33.33333%;
            }
            .col-sm-5 {
                width:41.66667%;
            }
            .col-sm-6 {
                width:50%;
            }
            .col-sm-7 {
                width:58.333333%;
            }
            .col-sm-8 {
                width:66.66667%;
            }
            .col-sm-9 {
                width:75%;
            }
            .col-sm-10 {
                width:83.33333%;
            }
            .col-sm-11 {
                width:91.66667%;
            }
            .col-sm-12 {
                width:100%;
            }
        }
        /* md */
        @media (min-width:768px){
            .container {
                width:720px;
            }
            .d-md-none {
                display:none!important;
            }
            .d-md-block {
                display:block!important;
            }
            .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 {
                float:left;
            }
            .col-md-1 {
                width:8.33333%;
            }
            .col-md-2 {
                width:16.66667%;
            }
            .col-md-3 {
                width:25%;
            }
            .col-md-4 {
                width:33.33333%;
            }
            .col-md-5 {
                width:41.66667%;
            }
            .col-md-6 {
                width:50%;
            }
            .col-md-7 {
                width:58.333333%;
            }
            .col-md-8 {
                width:66.66667%;
            }
            .col-md-9 {
                width:75%;
            }
            .col-md-10 {
                width:83.33333%;
            }
            .col-md-11 {
                width:91.66667%;
            }
            .col-md-12 {
                width:100%;
            }
        }
        /* lg */
        @media (min-width:992px){
            .container{
                width:960px;
            }
            .d-lg-none{
                display:none!important;
            }
            .d-lg-block{
                display:block!important;
            }
            .col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12 {
                float:left;
            }
            .col-lg-1 {
                width:8.33333%;
            }
            .col-lg-2 {
                width:16.66667%;
            }
            .col-lg-3 {
                width:25%;
            }
            .col-lg-4 {
                width:33.33333%;
            }
            .col-lg-5 {
                width:41.66667%;
            }
            .col-lg-6 {
                width:50%;
            }
            .col-lg-7 {
                width:58.333333%;
            }
            .col-lg-8 {
                width:66.66667%;
            }
            .col-lg-9 {
                width:75%;
            }
            .col-lg-10 {
                width:83.33333%;
            }
            .col-lg-11 {
                width:91.66667%;
            }
            .col-lg-12 {
                width:100%;
            }
        }
        /* xl */
        @media (min-width:1200px){
            .container{
                width:1140px;
            }
            .d-xl-none{
                display:none!important;
            }
            .d-xl-block{
                display:block!important;
            }
            .col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12{
                float:left;
            }
            .col-xl-1 {
                width:8.33333%;
            }
            .col-xl-2 {
                width:16.66667%;
            }
            .col-xl-3 {
                width:25%;
            }
            .col-xl-4 {
                width:33.33333%;
            }
            .col-xl-5 {
                width:41.66667%;
            }
            .col-xl-6 {
                width:50%;
            }
            .col-xl-7 {
                width:58.333333%;
            }
            .col-xl-8 {
                width:66.66667%;
            }
            .col-xl-9 {
                width:75%;
            }
            .col-xl-10 {
                width:83.33333%;
            }
            .col-xl-11 {
                width:91.66667%;
            }
            .col-xl-12 {
                width:100%;
            }
        }
        

        .header-nav{
            display:flex;
            justify-content:flex-end;
        }
        .nav-container{
            height:0;
            transition:height .5s;
        }
        
        /* 设置断点 控制中屏以上的显示 */
        @media (min-width:768px) {
            .slider-container .row{
                display:flex;
                align-items:center;
            }
        }
        
    </style>
</head>
<body>
    <!-- 
        align-self 对flex子元素设置，和 align-items值相同
        flex: flex-grow flex-shrink flex-basis
        默认： flex: 0 1;
        display:flex;display:inline-flex;
     -->
     <header>
         header
     </header>
     <nav class="nav-container d-md-none" id="nav">
        <ul class="container">
            <li class="nav-link">导航一</li>
            <li class="nav-link">导航二</li>
            <li class="nav-link">导航三</li>
            <li class="nav-link">导航四</li>
            <li class="nav-link">导航五</li>
        </ul>
     </nav>
     <div class="main">
         <div class="slider-container">
             <div class="container">
                <div class="row">
                    <div class="slider-text"></div>
                </div>
             </div>
         </div>
        <div class="content">
            <div class="inner"></div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1">1</div>
                <div class="col col-12 d-none d-md-block col-sm-6 col-md-4 col-lg-2 col-xl-1">2</div>
                <div class="col col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1">3</div>
                <div class="col col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1">4</div>
                <div class="col col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1">5</div>
                <div class="col col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1">6</div>
                <div class="col col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1">7</div>
                <div class="col col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1">8</div>
                <div class="col col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1">9</div>
                <div class="col col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1">10</div>
                <div class="col col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1">11</div>
                <div class="col col-12 col-sm-6 col-md-4 col-lg-2 col-xl-1">12</div>
            </div>
        </div>
     </div>

     <footer>
         footer
     </footer>
     
     <script>
         var div = document.querySelector(".inner")

         div.addEventListener("touchstart", function(e){
             console.log(e)
             console.log("touch start")
         })
         div.addEventListener("touchmove", function(e){
             console.log("touch move")
         })
         div.addEventListener("touchend", function(e){
             console.log("touch end")
         })

         function setRemUnit(){
            var docEl = document.documentElement
            var viewWidth = docEl.clientWidth
            docEl.style.fontSize = (viewWidth / 375) * 20 + 'px'
         }


         setRemUnit()
         window.onresize = setRemUnit
         document.getElementById("nav").onclick = function(){
             
         }


     </script>
</body>
</html>